<!DOCTYPE >
<html lang="en">
    <head>
        <title>Market Downloads</title>
    </head>
    <body>
        <a id="npmtrends" href="">View on npm trends</a>
        <canvas
            id="main"
            width="16"
            height="9"
            style="width: 90%; height: 90%"
        ></canvas>

        <script
            src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"
            integrity="sha256-Y26AMvaIfrZ1EQU49pf6H4QzVTrOI8m9wQYKkftBt4s="
            crossorigin="anonymous"
        ></script>
        <script
            src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@2.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"
            integrity="sha256-xlxh4PaMDyZ72hWQ7f/37oYI0E2PrBbtzi1yhvnG+/E="
            crossorigin="anonymous"
        ></script>

        <script type="module">
            //import Chart from 'https://cdnjs.com/libraries/Chart.js'

            // Requirements:
            // - >500 Stars on github
            // - >10k downloads/week
            const pkgs = [
                "@middy/core",
                "middy",

                // APIs Only
                "@codegenie/serverless-express",
                "@fastify/aws-lambda",
                "lambda-api",
                "serverless-http",

                // Deprecated
                "@vendia/serverless-express", // Deprecated for @codegenie/serverless-express
                "aws-serverless-express", // Deprecated for `@vendia/serverless-express`
                "aws-lambda-fastify", // Deprecated for @fastify/aws-lambda

                // Don't meet requirements
                // '@midwayjs/decorator',
                // '@dazn/lambda-powertools-pattern-basic', // wrapper around middy
                // '@lambda-middleware/compose'
                // 'serverless-express',
                // 'ts-lambda-api',
                // 'vandium',
                // 'curveball',
                // '@midwayjs/decorator',
            ];
            document
                .getElementById("npmtrends")
                .setAttribute(
                    "href",
                    `https://www.npmtrends.com/${pkgs.join("-vs-")}`,
                );
            // AWS Middlewares
            const pkgAws = [
                //'@aws-lambda-powertools/commons',
                "@aws-lambda-powertools/logger",
                "@aws-lambda-powertools/metrics",
                //'@aws-lambda-powertools/parameters',
                "@aws-lambda-powertools/tracer",
            ];
            const colors = {
                "@middy/core": "#ffa600",
            };
            const pickColor = (str) => {
                if (colors[str]) return colors[str];
                let hash = 0;
                for (let i = 0; i < str.length; i++) {
                    hash = str.charCodeAt(i) + ((hash << 5) - hash);
                }
                return `hsl(${hash % 360}, 80%, 65%)`;
            };

            const d = new Date();
            const period = `${d
                .toISOString()
                .substr(0, 10)
                .replace(d.getFullYear(), d.getFullYear() - 1)}:${d
                .toISOString()
                .substr(0, 10)}`;
            const dailyStats = {};
            const weeklyStats = {};
            //const yearlyStats = {}

            for (const pkg of pkgs.concat(pkgAws)) {
                const pkgColor = pickColor(pkg);
                // https://github.com/npm/registry/blob/master/docs/download-counts.md
                const dailyData = await fetch(
                    `https://api.npmjs.org/downloads/range/${period}/${pkg}`,
                )
                    .then((res) => res.json())
                    .then((res) =>
                        res.downloads.map((point) => ({
                            x: point.day,
                            //x: new Date(point.day),
                            y: point.downloads,
                        })),
                    );

                dailyStats[pkg] = {
                    label: pkg,
                    fill: false,
                    borderColor: pkgColor,
                    backgroundColor: pkgColor,
                    data: dailyData,
                };
                weeklyStats[pkg] = {
                    label: pkg,
                    fill: false,
                    borderColor: pkgColor,
                    backgroundColor: pkgColor,
                    data: [],
                };
                let sum = 0;
                for (const [idx, dailyStat] of dailyData.entries()) {
                    if ((idx + 1) % 7 === 0) {
                        weeklyStats[pkg].data.push({
                            x: dailyStat.x,
                            y: sum,
                        });
                        sum = 0;
                    }
                    sum += dailyStat.y;
                }
            }

            // join @middy/core & middy
            const data = [];
            for (
                let i = 0, l = weeklyStats["@middy/core"].data.length;
                i < l;
                i++
            ) {
                data.push({
                    x: weeklyStats["@middy/core"].data[i].x,
                    y:
                        weeklyStats["@middy/core"].data[i].y +
                        weeklyStats.middy.data[i].y,
                });
            }
            weeklyStats["SUM(middy)"] = {
                label: "SUM(middy)",
                fill: false,
                borderColor: "#000",
                backgroundColor: "#000",
                data,
            };

            // serverless-express
            /*
      data = []
      for (
        let i = 0, l = weeklyStats['aws-serverless-express'].data.length;
        i < l;
        i++
      ) {
        data.push({
          x: weeklyStats['aws-serverless-express'].data[i].x,
          y:
            weeklyStats['aws-serverless-express'].data[i].y +
            weeklyStats['@vendia/serverless-express'].data[i].y +
            weeklyStats['@codegenie/serverless-express'].data[i].y
        })
      }
      weeklyStats['SUM(serverless-express)'] = {
        label: 'SUM(serverless-express)',
        fill: false,
        borderColor: weeklyStats['aws-serverless-express'].borderColor,
        backgroundColor: weeklyStats['aws-serverless-express'].backgroundColor,
        data
      }
      */

            //console.log('dailyStats', dailyStats)
            //console.log('weeklyStats', weeklyStats)
            //    console.log('yearlyStats', year, yearlyStats)
            //    console.log('Total', year, yearlyStats['middy'] + yearlyStats['@middy/core'])

            const ctx = document.getElementById("main");
            new Chart(ctx, {
                type: "line",
                data: {
                    datasets: Object.values(weeklyStats),
                },
                elements: {},
                options: {
                    scales: {
                        x: {
                            type: "time",
                            scaleLabel: {
                                display: true,
                                labelString: period.substr(0, 4),
                            },
                            time: {
                                minUnit: "day",
                            },
                        },
                        y: {
                            scaleLabel: {
                                display: true,
                                labelString: "Downloads",
                            },
                        },
                    },
                    layout: {
                        padding: {
                            left: 10,
                            right: 25,
                            top: 10,
                            bottom: 10,
                        },
                    },
                    cubicInterpolationMode: "monotone",
                    spanGaps: true,
                    plugins: {
                        tooltip: {
                            mode: "index",
                        },
                    },
                },
            });
        </script>
    </body>
</html>
